<template>
  <div class="common-wrapper">
    <div class="common-search l-f l-row-sb">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="时间段">
          <a-range-picker
          v-model="queryForm.dates"
          :show-time="{
            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
          }"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          ></a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="姓名">
          <a-input v-model="queryForm.name" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="工种">
          <a-select v-model="queryForm.work" mode="multiple" style="width: 150px">
            <a-select-option v-for="item in workList" :key="item.data_value" :value="item.data_name">
              {{ item.data_name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="进出类型">
          <a-select v-model="queryForm.inOutType" style="width: 150px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="进">进</a-select-option>
            <a-select-option value="出">出</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="验证类型">
          <a-select v-model="queryForm.verifyType" style="width: 150px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="白名单">白名单</a-select-option>
            <a-select-option value="黑名单">黑名单</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="部门">
          <a-tree-select
            v-model="queryForm.department"
            style="width: 150px;"
            :dropdown-style="{ maxHeight: '400px',  overflow: 'auto' }"
            placeholder="请选择部门"
            allow-clear
            :tree-default-expand-all="false"
            :treeData="departmentList"
            :replaceFields="{children:'childs', title:'dep_name', key:'pkey', value: 'dep_name' }"
          >
          </a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="设备编号">
          <a-input v-model="queryForm.number" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="工号">
          <a-input v-model="queryForm.idCard" style="width: 150px" />
        </a-form-model-item>
      </a-form-model>
      <div class="l-f">
        <a-button @click="getTableData" type="primary" icon="search" class="l-mg-r10">搜索</a-button>
        <a-button @click="onAdd" type="primary" icon="plus" class="l-mg-r10">添加</a-button>
        <a-button @click="onExport" type="primary" icon="download" :loading="exportLoading" class="l-mg-r10"
          >导出</a-button
        >
        <a-button @click="onDel" type="danger" icon="delete" :disabled="!hasSelected" class="l-mg-r10">删除</a-button>
        <a-button type="primary" style="background: #e6b422; border-color: #e6b422;" class="l-mg-r10" @click="onPull">
          设备提取
        </a-button>
        <a-button type="danger" class="l-mg-r10" @click="onControlDel">设备记录删除</a-button>
      </div>
    </div>
    <div class="common-main" ref="main">
      <a-table
        size="middle"
        rowKey="pkey"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :scroll="{ y: 500, x: 1200 }"
        :data-source="dataSource"
        bordered
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="image_path" slot-scope="text, record">
          <img :src="record.image_path" alt="" @click="showImg(record.image_path)" style="width: 50px;height: 50px;">
        </template>
        <!-- <template slot="action" slot-scope="text, record">
          <a-button type="link" @click="openPlan(record.pkey)">详情</a-button>
        </template> -->
      </a-table>
    </div>
    <EntryAndExitRecords ref="entryAndExitRecordsRef" />
    <PullForm ref="pullFormRef" />
    <ControlDelForm ref="controlDelFormRef" />
    <a-modal :visible="visible" :footer="null" @cancel="visible = false">
      <img style="width: 100%" :src="imageUrl" />
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { getDepartmentList, getDatadictionary } from '@/api/plan'
import { getInoutrecordListApi, delInoutrecordApi } from '@/api/attendance'
import { exportFile } from '@/utils/exportFile'
import EntryAndExitRecords from './components/entryAndExitRecords/EntryAndExitRecords.vue'
import PullForm from './components/entryAndExitRecords/PullForm.vue'
import ControlDelForm from './components/entryAndExitRecords/ControlDelForm.vue'

export default {
  components: {
    EntryAndExitRecords,
    PullForm,
    ControlDelForm
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data() {
    const columns = [
      {
        title: '编号',
        dataIndex: 'index',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'index' },
      },
      {
        title: '姓名',
        dataIndex: 'person_name',
        align: 'center',
        width: 100,
      },
      {
        title: '性别',
        dataIndex: 'person_sex',
        align: 'center',
        width: 80,
      },
      {
        title: '工号',
        dataIndex: 'person_idcard_code',
        align: 'center',
        width: 150,
      },
      {
        title: '工种',
        dataIndex: 'work_type_name',
        align: 'center',
        width: 120,
      },
      {
        title: '部门',
        dataIndex: 'dep_name',
        align: 'center',
        width: 120,
      },
      {
        title: '时间',
        dataIndex: 'record_time',
        align: 'center',
        width: 120,
      },
      {
        title: '设备编号',
        dataIndex: 'control_number',
        align: 'center',
        width: 150,
      },
      {
        title: '设备名称',
        dataIndex: 'control_name',
        align: 'center',
        width: 150,
      },
      {
        title: '进出类型',
        dataIndex: 'comm_type',
        align: 'center',
        width: 100,
      },
      {
        title: '验证类型',
        dataIndex: 'type',
        align: 'center',
        width: 100,
      },
      {
        title: '抓拍照片',
        dataIndex: 'image_path',
        align: 'center',
        scopedSlots: { customRender: 'image_path' },
        width: 180,
      },
      // {
      //   title: '操作',
      //   width: 120,
      //   align: 'center',
      //   scopedSlots: { customRender: 'action' },
      // },
    ]
    return {
      moment,
      queryForm: {
        dates: [],
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        startTime: '',
        endTime: '',
        name: '', // 姓名
        work: [], // 工种
        inOutType: '', // 进出类型
        verifyType: '', // 验证类型
        department: '', // 部门
        number: '', // 设备编号
        idCard: '', // 工号
      },
      // 部门列表
      departmentList: [],
      // 工种列表
      workList: [],
      columns,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      dataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
      exportLoading: false,
      visible: false,
      imageUrl: ''
    }
  },
  created() {
    this.getTableData()
    this.getDepartmentList()
    this.getWorkList()
  },
  methods: {
    showImg(url) {
      this.imageUrl = url
      this.visible = true
    },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      const selectArr = []
      selectedRows.forEach((item) => {
        selectArr.push(item.pkey)
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    // 获取打卡记录列表
    async getTableData() {
      this.loading = true
      const {dates, name, work, inOutType, department, number, verifyType, idCard } =
        this.queryForm
      let startDate = '',
          endDate = '',
          startTime = '',
          endTime = ''
      if(dates.length > 0) {
        let startTimeStr = dates[0]
        let endTimeStr = dates[1]
        let startTimeArr = startTimeStr.split(' ')
        let endTimeArr = endTimeStr.split(' ')
        startDate = startTimeArr[0]
        startTime = startTimeArr[1]
        endDate = endTimeArr[0]
        endTime = endTimeArr[1]
      }
      let work_type_names = work.join(',')
      const { data } = await getInoutrecordListApi({
        page_size: this.pagination.pageSize,
        page_index: this.pagination.current,
        start_date: startDate,
        end_date: endDate,
        start_time: startTime,
        end_time: endTime,
        id_card: idCard,
        person_name: name,
        work_type_names: work_type_names,
        comm_type: inOutType,
        dep_name: department,
        type: verifyType,
        control_number: number,
      })
      this.loading = false
      this.dataSource = data.items
      this.pagination.total = data.totalCount
    },
    // 导出打卡记录
    async onExport() {
      this.exportLoading = true
      const { dates, name, work, inOutType, department, number, verifyType, idCard } =
        this.queryForm
      let startDate = '',
          endDate = '',
          startTime = '',
          endTime = ''
      if(dates.length > 0) {
        let startTimeStr = dates[0]
        let endTimeStr = dates[1]
        let startTimeArr = startTimeStr.split(' ')
        let endTimeArr = endTimeStr.split(' ')
        startDate = startTimeArr[0]
        startTime = startTimeArr[1]
        endDate = endTimeArr[0]
        endTime = endTimeArr[1]
      }
      let work_type_names = work.join(',')
      let data = {
        page_size: this.pagination.pageSize,
        page_index: this.pagination.current,
        start_date: startDate,
        end_date: endDate,
        start_time: startTime,
        end_time: endTime,
        id_card: idCard,
        person_name: name,
        work_type_names: work_type_names,
        comm_type: inOutType,
        dep_name: department,
        type: verifyType,
        control_number: number,
      }
      await exportFile('api/manager/inoutrecord/v1/export', data, '进出记录.xlsx')
      this.exportLoading = false
    },
    onAdd() {
      this.$refs.entryAndExitRecordsRef.add()
    },
    onPull() {
      this.$refs.pullFormRef.edit()
    },
    onControlDel() {
      this.$refs.controlDelFormRef.edit()
    },
    onDel() {
      this.$confirm({
        title: '提示',
        content: '确定删除吗？',
        onOk: async () => {
          const { statusCode, errors } = await delInoutrecordApi({
            ids: this.selectedRowKeys,
          })
          if (statusCode == 200) {
            this.$message.success('删除成功！')
            this.getTableData()
          } else {
            this.$message.error(errors)
          }
        },
      })
    },
    // 获取部门列表
    async getDepartmentList() {
      const { data } = await getDepartmentList()
      this.departmentList = data
    },
    // 获取工种列表
    async getWorkList() {
      const { data } = await getDatadictionary({ data_type: 3 })
      this.workList = data
    },
  },
}
</script>

<style lang="less" scoped>
</style>